<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title></title>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script>
			$(function() {
				$("#save").button({
		            icons: {
		                primary: "ui-icon-disk"
		            }
		        }).click(function(){
					disableField(["save","confirm"]);
					$("#save").addClass("ui-button-disabled ui-state-disabled");
					$("#confirm").addClass("ui-button-disabled ui-state-disabled");
		        	if ($("#job").val() == "edit" || $("#job").val()=="search") {
		        		$("#job").val("edit");
			        	$("#saveForm").submit();
		        	} else {
		        		$("#job").val("save");
			        	$("#saveForm").submit();
		        	}
		        });
				$("#confirm").button({
		            icons: {
		                primary: "ui-icon-circle-check"
		            }
		        }).click(function(){
					if(confirm('คุณต้องการยืนยันข้อมูล?')==true){
			        	$("[name=balanceAmount]").removeAttr("disabled");
						disableField(["save","confirm"]);
						$("#save").addClass("ui-button-disabled ui-state-disabled");
						$("#confirm").addClass("ui-button-disabled ui-state-disabled");
			        	$("#job").val("confirm");
			        	$("#saveForm").submit();
		        	}
		        });
				$("#search").button({
		            icons: {
		                primary: "ui-icon-search"
		            }
		        }).click(function(){
		        	if (validateEmpty()) {
			        	$("#job").val("search");
		        		$("#saveForm").submit();
		        	}
		        });
			/* 	$("[name=balanceAmount]").blur(function(){
					
				}); */
				$("#download").button({
		            icons: {
		                primary: "ui-icon-print"
		            }
				}).click(function(){
					window.location='/provacc/acc6?app=ACC60108&job=export&mm='+$("#hiddenMM").val()+'&yyyy='+$("#hiddenYYYY").val()+'&suspendDate='+$("#suspendDate").val();
				});

				
			});
			function diffAmount(object){
				var diffAmount = 0;
				if (object.value != null && object.value != "") {
					diffAmount = toFloat(object.value)-toFloat(document.getElementById("acc67Amount"+object.id).value);
					if (diffAmount == 0) {
						diffAmount = "0.00";
					} else {
						diffAmount = addCommasNoReplace2D(diffAmount);
					}
					document.getElementById("suspendAmount"+object.id).value = diffAmount;
				}
			}
			function setAreaCode(v) {
				document.getElementById("areaCode").value = v;
			}
			function showArea(v, mode) {
				if (v == "2") {
					document.getElementById("nhsoZone").style.display = "inline";
					document.getElementById("province").style.display = "none";
					if (mode == 1){
						document.getElementById("nhsoZone").value = " ";
					}
				} else if (v == "3") {
					document.getElementById("province").style.display = "inline";
					document.getElementById("nhsoZone").style.display = "none";
					if (mode == 1){
						document.getElementById("province").value = " ";
					}
				} else {
					document.getElementById("nhsoZone").style.display = "none";
					document.getElementById("province").style.display = "none";
				}
			}
		</script>
	</head>
	<body>
		<c:set var="auth" value="${el:getMapValue(menuAuth, 'ACC60405')}"/>
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="saveForm" id="saveForm" action="${pageContext.request.contextPath}/acc6" method="post">
		<input type="hidden" name="app" id="app" value="ACC60108"/>
		<input type="hidden" name="job" id="job" value="${job}"/>
		<input type="hidden" name="hiddenMM" id="hiddenMM" value="${hiddenMM}"/>
		<input type="hidden" name="hiddenYYYY" id="hiddenYYYY" value="${hiddenYYYY}"/>
		<table width="100%" class="ui-widget ui-widget-content" border="0">
			<tr>
				<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC60405}</b></th>
			</tr>
			<tr>
				<td class="bold"  width="15%">จังหวัด : </td>
				<td>
					<c:if test="${userInfo.areaLevel != 2}" >
						<select name="areaLevel" id="areaLevel" onchange="showArea(this.value);">
						<option value="">--- กรุณาเลือกข้อมูล ---</option>
						<c:forEach var="al" items="${areaLevel}">
							<c:if var="selected" test="${areaLevelSelected == al.key}" />
							<option value="${al.key}" ${selected ? 'selected' : ''}>${al.key == '1' ? 'เลือกทั้งหมด' : al.value}</option>
					    </c:forEach>
					    </select>
					    <select name="nhsoZone" id="nhsoZone" style="display: none;" onchange="setAreaCode(this.value,'1');">
						<option value="">--- กรุณาเลือกข้อมูล ---</option>
						<c:forEach var="nhsoZone" items="${lsNhsoZone}">
							<c:if var="selected" test="${nhsoZoneSelected == nhsoZone.NHSO_ZONE}" />
							<option value="${nhsoZone.NHSO_ZONE}" ${selected ? 'selected' : ''}>${nhsoZone.NHSO_ZONENAME}</option>
					    </c:forEach>
					    </select>
					    <select name="province" id="province" style="display: none;" onchange="setAreaCode(this.value,'1');">
						<option value="">--- กรุณาเลือกข้อมูล ---</option>
						<c:forEach var="province" items="${lsProvince}">
							<c:if var="selected" test="${provinceId == province.PROVINCE_ID}" />
							<option value="${province.PROVINCE_ID}" ${selected ? 'selected' : ''}>${province.PROVINCE_NAME}</option>
					    </c:forEach>
					    </select>
				    	<script>showArea("${areaLevelSelected}","0");</script>
					</c:if>
					<c:if test="${userInfo.areaLevel == 2}">
						<input type="hidden" name="areaLevel" id="areaLevel" value="3"/>
					    <select name="areaCode" id="areaCode">
						<option value="">--- กรุณาเลือกข้อมูล ---</option>
						<c:forEach var="province" items="${lsProvince}">
							<c:if var="selected" test="${provinceId == province.PROVINCE_ID}" />
							<option value="${province.PROVINCE_ID}" ${selected ? 'selected' : ''}>${province.PROVINCE_NAME}</option>
					    </c:forEach>
					    </select>
					</c:if>
				    <span class="red" id="$areaLevel">*</span>
				</td>
			</tr>
			<tr>
				<td class="bold">ปี : </td>
				<td>
					<select name="yyyy" id="yyyy">
						<option value="">----- เลือก -----</option>
						<c:forEach var="listBudgetYear" items="${listBudgetYear}">
							<c:if  test="${yyyy == listBudgetYear.BUDGET_YEAR}" var="sel"/>
							<option value="${listBudgetYear.BUDGET_YEAR}" ${sel?'selected':''}>${listBudgetYear.BUDGET_YEAR}</option>
						</c:forEach>
					</select><span id="$yyyy" class="red">*</span>
				</td>
			</tr>
			<tr>
				<td class="bold">เดือน :  </td>
				<td>
					<select name="mm" id="mm">
						<option value="">----- เลือก -----</option>
							<option value="01" ${'01' == mm?'selected':''}>มกราคม</option>
							<option value="02" ${'02' == mm?'selected':''}>กุมภาพันธ์</option>
							<option value="03" ${'03' == mm?'selected':''}>มีนาคม</option>
							<option value="04" ${'04' == mm?'selected':''}>เมษายน</option>
							<option value="05" ${'05' == mm?'selected':''}>พฤษภาคม</option>
							<option value="06" ${'06' == mm?'selected':''}>มิถุนายน</option>
							<option value="07" ${'07' == mm?'selected':''}>กรกฎาคม</option>
							<option value="08" ${'08' == mm?'selected':''}>สิงหาคม</option>
							<option value="09" ${'09' == mm?'selected':''}>กันยายน</option>
							<option value="10" ${'10' == mm?'selected':''}>ตุลาคม</option>
							<option value="11" ${'11' == mm?'selected':''}>พฤศจิกายน</option>
							<option value="12" ${'12' == mm?'selected':''}>ธันวาคม</option>
					</select>
					<span id="$mm" class="red">*</span>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<c:if test="${fn:contains(auth, 'S')}">
						<button id="search" type="button" class="acc67-button">ค้นหาข้อมูล</button>
					</c:if>
					<c:if test="${job == 'edit' || job == 'search'}">
						<!-- <button id="download" type="button" class="acc67-button">Download</button> -->
					</c:if>
				</td>
			</tr>
		</table>
		<c:if test="${!empty listData}">
		<br>
			<c:set var="sum" value="0"/>
			<table class="acc67-grid ui-widget ui-widget-content" width="100%" cellpadding="1" cellspacing="1">
				<tr>
					<td>ยอดเงิน ณ วันที่ : ${suspendDate}
						<input type="hidden" name="suspendDate" id="suspendDate" value="${suspendDate}"/>
					</td>
				</tr>
				<tr>
					<th class="ui-state-default">จังหวัด</th>
					<th class="ui-state-default">ยอดเงินในระบบ</th>
					<th class="ui-state-default">ยอดเงินฝากธนาคาร</th>
					<th class="ui-state-default">กองทุนย่อยเพื่อรอการตวรจสอบ</th>
				</tr>
				<c:forEach var="data" items="${listData}" varStatus="x">
				<tr class="grid-tr-${x.count % 2}">
					<c:if test="${data.suspendStatus== 'Y'}" var="isDisable"/>
					<td align="left">
						${data.provinceName}
						<input type="hidden" name="provinceId" id="provinceId" value="${data.provinceId}">	
					</td>
					<td align="center">
						<input type="text" name="acc67Amount" ${isDisable?'disabled':'readonly'} id="acc67Amount${x.count}" class="text-amount" value="<fmt:formatNumber pattern="#,##0.00" value="${data.acc67Amount}" />"/>
					</td>
					<td align="center">
						<input type="text" name="baacAmount" ${isDisable?'disabled':''} id="${x.count}" class="text-amount" value="<fmt:formatNumber pattern="#,##0.00" value="${data.baacAmount}" />" onblur="this.value = addCommas2D(this.value); diffAmount(this);" onkeypress="return numberAndDot(event);"/>
					</td>
					<td align="center">
						<input type="text" name="suspendAmount" ${isDisable?'disabled':'readonly'} id="suspendAmount${x.count}" class="text-amount" value="<fmt:formatNumber pattern="#,##0.00" value="${data.suspendAmount}" />" onblur="this.value = addCommas2D(this.value);" onkeypress="return numberAndDot(event);"/>
					</td>
				</tr>
				</c:forEach>
						<tr>
							<td colspan="4" align="center">
								<c:if test="${!isConfirm}">
									<c:if test="${fn:contains(auth, 'U')}">
										<button id="save" type="button" class="ac67-button">บันทึกข้อมูล</button>
									</c:if>
									<c:if test="${fn:contains(auth, 'U')}">
										<button id="confirm" type="button" class="ac67-button">ยืนยันข้อมูล</button>
									</c:if>
								</c:if>
							</td>
						</tr>
				</table>
			</fieldset>
			</c:if>
		</form>
	</body>
</html>